<template>
  <!-- 店铺详情 -->
  <div class="box" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中"
    element-loading-background="rgba(255, 255, 255, 0.8)">
    <div v-show="!loading">
      <heads></heads>
      <div class="tit1">
        <div class="list">
          <div class="li" style="cursor: pointer" @click="() => {
            $router.push('/');
          }
            ">
            <img src="../../assets/logo.png" />
            <!-- <span>帮帮同城</span> -->
          </div>
          <!-- <div>二手房</div>
        <div>新房</div>
        <div>租房</div> -->
          <div class="sousuo" style="margin-left: 500px">
            <input type="text" v-model="searchtext" @keyup.enter="search" placeholder="请输入区域小区名称开始找房" />
            <p class="el-icon-search" @click="search"></p>
          </div>
          <!-- <div class="but">下载帮帮同城app</div> -->
        </div>
      </div>
      <div class="tit_name">
        <div class="p1 pointer" @click.stop="showMap(shopInfo)">
          {{ shopInfo.shopName }}
        </div>
        <!-- <div class="p2">店铺介绍</div>
      <div class="p3 line1">{{shopInfo.shopIntroduce}}</div> -->
        <div>
          <div style="
              display: flex;
              align-items: center;
              cursor: pointer;
              margin-left: 66px;
            " @click="collect(1)" v-if="isCollection == 0">
            <img style="width: 30px; height: 30px" src="../../assets/shou2.png" />
            <span style="color: #333; font-size: 18px">关注</span>
          </div>
          <div style="
              display: flex;
              align-items: center;
              cursor: pointer;
              margin-left: 66px;
            " @click="collect(2)" v-if="isCollection > 0">
            <img style="width: 30px; height: 30px" src="../../assets/shou3.png" />
            <span style="color: #333; font-size: 18px">已关注</span>
          </div>
        </div>
      </div>
      <!-- <div style="display: flex;align-items: center;margin-left: 10px;cursor: pointer;position: relative;bottom: 33px;left: 800px;" @click="collect(1)"  v-if="isCollection == 0">
			<img style="width: 30px;height: 30px;" src="../../assets/shou2.png" />
			<span style="color: #333;font-size: 14px;">关注</span>
		</div> -->
      <div class="shopIntroduc">
        <div class="shopIntroduc_left">
          <div class="p2 pointer" @click="goCanpany">店铺介绍</div>
          <div class="p3" v-if="shopInfo.shopIntroduce">
            <pack-up-text2 :text="shopInfo.shopIntroduce"></pack-up-text2>

            <!-- {{ shopInfo.storeIntroduction }} -->
          </div>
        </div>
        <div class="shopIntroduc_right" style="color: #333333">
          <el-tooltip :content="shopInfo.contactsPhone" placement="top" v-if="shopInfo && shopInfo.contactsPhone"
            @click.native="phoneGet">
            <img style="cursor: pointer" src="../../assets/dianhua_lan.png" alt="" />
          </el-tooltip>
          <img style="cursor: pointer" src="../../assets/dianhua_lan.png" alt="" v-else />

          <img @click="chat(shopInfo.userId)" style="margin-left: 30px; cursor: pointer"
            src="../../assets/bbcz/xqlt01.png" alt="" />
        </div>
      </div>
      <!-- 显示7张图的跑马灯轮播 -->
      <transition name="fade">
        <div class="swiper-btn-control-wrap center">
          <div class="swiper-btn-control btn-control1" @click.stop="prev">
            <span class="el-icon-arrow-left btn-control"></span>
          </div>
          <div class="swiper-btn-control btn-control2" @click.stop="next">
            <span class="el-icon-arrow-right btn-control"></span>
          </div>
          <div @touchend="end" @touchstart="start" @touchmove="move" class="swiper">
            <div v-for="(item, index) in imgs" v-if="item.type == 2" :style="config5[index]" :key="item.cover"
              @mouseover="swiper = false" @mouseleave="swiper = true">
              <img v-if="item.remarks == 1" :src="item.image" style="width: 100%; height: 100%; cursor: pointer"
                @click="particulars(item.id)" />
              <video v-if="item.remarks == 2" id="video1001" controls :src="item.image" style="
                  width: 100%;
                  height: 100%;
                  cursor: pointer;
                  background: #aaa;
                "></video>
            </div>
            <div class="swiper-button-prev" @click="prev" style="color: '#64b6a8!important'"></div>
            <div class="swiper-button-next" @click="next" style="color: '#64b6a8!important'"></div>
          </div>
        </div>
      </transition>
      <div class="leibie">
        <div :class="leibieXuan == 1 ? 'xuan' : ''" @click="leibieClick(1)">
          房源
        </div>
        <div :class="leibieXuan == 2 ? 'xuan' : ''" @click="leibieClick(2)">
          经纪人
        </div>
        <div :class="leibieXuan == 3 ? 'xuan' : ''" @click="leibieClick(3)">
          帮友圈
        </div>
        <div :class="leibieXuan == 4 ? 'xuan' : ''" @click="leibieClick(4)" v-if="recruitData.length > 0">
          在招职位
        </div>
      </div>
      <div v-if="leibieXuan == 1">
        <div class="bottom">
          <div class="titLiat">
            <div @click="titClick(index)" :class="xuanzhong == index ? 'li cur' : 'li'" v-for="(item, index) in list"
              :key="index">
              <p>{{ item.name }}</p>
              <img v-if="index == xuanzhong" src="../../assets/xuanzhong.png" />
            </div>
          </div>
          <div class="list">
            <div class="li" v-for="(item, index) in houseList" :key="index">
              <img class="biao" @click="details(item)" :src="item.displayDiagram ||
                item.display_diagram ||
                (item.houseImage && item.houseImage.split('|')[0]) ||
                (item.house_image && item.house_image.split('|')[0])
                " style="
                  object-fit: contain;
                  cursor: pointer;
                  background-color: #00000033;
                " />
              <div class="name" @click="details(item)">
                <div class="t_1">{{ item.title }}</div>
                <div class="t_2">
                  <span style="margin-right: 5px">{{ item.region }}</span>
                  <span>{{ item.address }}</span>
                </div>
                <div class="t_3">
                  <span style="margin-right: 16px">{{ item.house_type }}</span>
                  <span style="margin-right: 16px">{{ item.AREA }}㎡</span>
                  <span>{{ item.foors }}</span>
                </div>
                <div class="t_4">
                  <img style="border-radius: 31px" :src="item.image ||
                    'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " />
                  <span @click.stop="goHouseAgentDetails(item)">{{
                    item.nikeName || "未命名用户"
                  }}</span>
                  <div style="cursor: pointer" @click="shopdetails(item.shop_id)">
                    {{ item.shop_name }}
                  </div>
                </div>
              </div>
              <div class="qian" v-if="item.transaction_type == 2">
                <p class="p1">{{ item.price }}万</p>
                <p class="p2">
                  {{ ((item.price * 10000) / item.AREA).toFixed(2) }}元/㎡
                </p>
              </div>
              <div class="qian" v-else>
                <p class="p1">{{ item.price }}元/月</p>
              </div>
            </div>
          </div>
          <div v-if="houseTotal == 0">
            <el-empty desc="还没有发布房子"></el-empty>
          </div>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="houseTotal" :page-size="housePage.pageSize"
              :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
          </div>
        </div>
      </div>
      <div v-if="leibieXuan == 2">
        <div class="list2">
          <div class="li" v-for="(item, index) in agentInfoList" :key="index">
            <img class="touxiang" :src="item.userImage ||
              item.image ||
              'https://pic.bangbangtongcheng.com/static/my/header.png'
              " @click="toAgent(item.userId)" />
            <div @click="toAgent(item.userId)" style="cursor: pointer" class="name">
              {{ item.nikeName || "未命名用户" }}
            </div>
            <div class="pingfen">
              <div>评分</div>
              <img v-for="(item1, index) in Number(item.scoreAvg)" :key="index" src="../../assets/xin_liang.png" />
              <img v-for="(item1, index) in 5 - item.scoreAvg" :key="index" src="../../assets/xin_hui.png" />
            </div>
            <div class="weigui ">
              <div class="wei" @click="showWeigui(item)">
                <span>违规次数</span>
                <span>></span>
                <span style="color: red; font-weight: 600; font-size: 20px">{{
                  item.violation || 0
                }}</span>
              </div>
              <!-- <img style="margin-left: 20px;" @click="chat(item.userId)" src="../../assets/xiaoxi_lan.png" />
							<el-tooltip class="item" effect="dark" :content="item.userPhone" placement="top-start">
								<img src="../../assets/dianhua_lan.png" />
							</el-tooltip> -->
            </div>
            <div class="xian"></div>
          </div>
        </div>
        <div v-if="agentInfoTotal == 0">
          <el-empty desc="还没有经纪人"></el-empty>
        </div>
        <div class="fenye">
          <el-pagination background layout="prev, pager, next" :total="agentInfoTotal" :page-size="agentInfoPage.pageSize"
            :current-change="agentInfoPage.pageNo" @current-change="currentagentInfo"></el-pagination>
        </div>
      </div>
      <div v-if="leibieXuan == 3">
        <div class="list3">
          <template v-for="(item, i) in articleList">
            <bbczFriendCircleItem :item="item" :key="item.id" :i="i" :wrapWidth="1200" @reData="getFriendCircle()">
            </bbczFriendCircleItem>
          </template>
          <div v-if="articleTotal == 0">
            <el-empty desc="还没有发布帮友圈"></el-empty>
          </div>

        </div>
        <div class="fenye">
          <el-pagination background layout="prev, pager, next" :total="articleTotal" :page-size="articlePage.pageSize"
            :current-change="articlePage.pageNo" @current-change="currentarticle"></el-pagination>
        </div>
      </div>
      <div v-if="leibieXuan == 4">
        <div style="margin: 24px auto; margin-bottom: 32px; max-width: 1200px" v-if="recruitData.length > 0">
          <invite-item :item="item" v-for="(item, i) in recruitData" :key="item.id" line></invite-item>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="houseTotal" :page-size="housePage.pageSize"
              :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
          </div>
        </div>
        <div v-else>
          <el-empty desc="还没有发布在招职位呢"></el-empty>
        </div>
      </div>
      <floor></floor>
      <chat ref="chats"></chat>
      <inform ref="inform" :bUserId="bUserId"></inform>
    </div>
    <bbcz-dear-dialog ref="mapDear"></bbcz-dear-dialog>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import chat from "../../components/chat.vue";
import inform from "./inform";
import bbczFriendCircleItem from "./comp/bbcz-friend-circle-item";
import BbczDearDialog from "./comp/bbcz-dear-dialog.vue";
import inviteItem from "@/views/invite/comp/item";
export default {
  components: {
    floor,
    heads,
    chat,
    inform,
    bbczFriendCircleItem,
    BbczDearDialog,
    inviteItem,
  },
  data() {
    return {
      loginstate: false,
      isCollection: 0,
      checkedCities: [],
      leibieXuan: 1,
      xuanzhong: 0,
      list: [
        { num: 0, name: "全部" },
        { num: 1, name: "二手房" },
        { num: 2, name: "新房" },
        { num: 3, name: "出租房" },
      ],
      shopInfo: {},
      // 卡片轮播
      loading: true,
      currentIndex: 3, //当前中间imgs数组中index
      centerInfo: "", // 当前中间信息
      startX: "",
      endX: "",
      imgs: [],
      previous: 0,
      config5: [
        {
          id: "-A",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "0",
          opacity: 1,
          zIndex: 0,
          transition: ".4s",
        },
        {
          id: "A",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "8%",
          opacity: 1,
          zIndex: 1,
          transition: ".4s",
        },
        {
          id: "B",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "20%",
          opacity: 1,
          zIndex: 2,
          transition: ".4s",
        },
        {
          id: "center",
          position: "absolute",
          width: "360px",
          height: "240px",
          top: "0px",
          left: "calc(100% - 50% - 180px)",
          // marginLeft: "-22.5%",
          opacity: 1,
          zIndex: 4,
          transition: ".4s",
        },
        {
          id: "D",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "calc(100% - 20% - 323px)",
          opacity: 1,
          zIndex: 2,
          transition: ".4s",
        },
        {
          id: "E",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "calc(100% - 8% - 290px)",
          opacity: 1,
          zIndex: 1,
          transition: ".4s",
        },
        {
          id: "E+",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "calc(100% - 243px)",
          opacity: 1,
          zIndex: 0,
          transition: ".4s",
        },
      ],
      housePage: {
        pageNo: 1,
        pageSize: 10,
        isLz: "0",
        examineStatus: "2",
        upStatus: "1",
        keyword: "",
      },
      houseList: [],
      houseTotal: 0,
      agentInfoPage: {
        pageNo: 1,
        pageSize: 8,
        dutyStatus: "1",
        status: "1",
      },
      agentInfoList: [],
      agentInfoTotal: 0,
      articlePage: {
        pageNo: 1,
        pageSize: 10,
        type: "1",
      },
      articleList: [],
      articleTotal: 0,
      articlePage2: {
        pageNo: 1,
        pageSize: 10,
        type: "2",
      },
      articleList2: [],
      bannerList: [],
      searchtext: "",
      t1: "",
      swiper: true,
      bUserId: "",
      normalStatus: true,
      recruitData: [],
      recruitDataTotal: 0,
    };
  },
  mounted() {
    this.t1 = setInterval(() => {
      if (this.swiper && this.normalStatus) {
        this.next();
      }
    }, 2000);
    // new Swiper(".swiper-container", {
    //   loop: true, // 循环模式选项
    //   // 如果需要分页器
    //   pagination: {
    //     el: ".swiper-pagination"
    //   }
    // });
  },
  beforeDestroy() {
    clearInterval(this.t1);
  },
  created() {
    this.init();
    //回到顶部
    var top = document.body.scrollTop || document.documentElement.scrollTop;
    scrollBy(0, -top);
  },
  methods: {
    goCanpany() {
      if (this.shopInfo && this.shopInfo.userId) {
        this.$getHttp("/api/mobile/public/getCompanyInformationByUserId", {
          userId: this.shopInfo.userId,
        }).then((res) => {
          if (res.userCompanyInformation) {
            this.openUrlb('/invite/company', {
              userId: this.shopInfo.userId
            })
          }
        })
      }
    },
    dianjiVideo() {
      let indexy = 0;
      let indexs = 0;
      this.config5.forEach((e, s) => {
        if (e.id == "center") {
          indexy = s;
        }
      });
      this.imgs.forEach((i, j) => {
        if (i.remarks == 2) {
          indexs = j;
        }
      });
      let number = Number(indexs) - Number(indexy);
      if (number) {
        number = Math.abs(number);
      }
      for (let index = 0; index < number; index++) {
        this.config5.push(this.config5.shift());
      }
    },
    phoneGet() {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return false;
      }
      // this.phonestate = !this.phonestate
      // console.log(this.storey);
      this.$postHttp("/mob/user/call", {
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
        telephoneNumber: this.shopInfo.contactsPhone,
        associationId: this.shopInfo.id,
        type: "1",
      }).then((res) => { });
    },
    showMap(shopInfo) {
      this.$refs.mapDear.openDialoag(shopInfo);
    },
    async init() {
      this.housePage.shopId = this.$route.query.id;
      if (this.$route.query.tabNum) {
        this.leibieXuan = this.$route.query.tabNum;
      }
      this.agentInfoPage.shopId = this.$route.query.id;
      this.articlePage.shopId = this.$route.query.id;
      this.articlePage2.shopId = this.$route.query.id;
      //this.getBanner()
      await this.getShopInfoDetail(this.$route.query.id);
      this.getUser();
      this.getHouseInfo();
      await this.getRecruit();

      // this.getArticleInfo()
      this.getArticleInfo2(this.$route.query.id);
    },
    getRecruit() {
      let that = this;
      this.$getHttp("/api/mobile/personnelOwner/getRecruitmentPosition", {
        userId: this.shopInfo.userId,
      }).then((res) => {
        this.recruitData = res.recruitment.pageList;
        this.houseTotal = res.recruitment.pageCount;

      });
    },
    //判断用户是否登录，如果登录则查询是否收藏
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
        this.$getHttp("/mob/user/getIsCollection", {
          userId: user.id,
          cbType: 2,
          type: 1,
          relationId: this.$route.query.id,
        }).then((data) => {
          if (data.code == 200) {
            this.isCollection = data.isCollection;
          }
        });
        this.$postHttp("/mob/user/saveUserCollection", {
          userId: user.id,
          type: 2,
          cbType: 2,
          relationId: this.$route.query.id,
        }).then((data) => { });
      } else {
        this.loginstate = false;
      }
    },
    getShopInfoDetail(id) {
      return this.$getHttp("/mob/user/getShopInfoDetail", { id: id }).then(
        (data) => {
          if (data.code == 200) {
            this.shopInfo = data.shopInfo;
            let image = data.shopInfo.image.split("|");
            // for (var i = 0; i < image.length; i++) {
            //   this.imgs.push({
            //     index: i,
            //     cover: image[i]
            //   });
            // }
          }
        }
      );
    },
    getHouseInfo() {
      return this.$getHttp("/mob/home/getHouseInfo", this.housePage).then(
        (data) => {
          if (data.code == 200) {
            data.list.forEach((e) => {
              //判断该对象是否存在该属性
              if (e.hasOwnProperty("FLOOR")) {
                if (e.FLOOR.indexOf("|") == -1) {
                  e.foors = "";
                } else {
                  e.foors =
                    e.FLOOR.split("|")[0] +
                    "层/" +
                    "共" +
                    e.FLOOR.split("|")[1] +
                    "层";
                }
              }
              // if('FLOOR' in e){
              // 	e.foors = this.floor(e.FLOOR)
              // }
            });
            this.houseList = data.list;
            this.houseTotal = data.count;
            setTimeout(() => {
              this.loading = false;
            }, 100);
          }
        }
      );
    },
    // getArticleInfo(){
    // 	this.$getHttp("/mob/user/getArticleInfo", this.articlePage).then((data) => {
    // 		if (data.code == 200) {
    // 			// data.list.forEach((e) => {
    // 			// 	e.image = e.image.split('|')
    // 			// })
    // 			console.log(data.list);
    // 			this.articleList = data.list
    // 			this.articleTotal = data.count
    // 		}
    // 	});
    // },

    getArticleInfo2(shopId) {
      let that = this;
      this.$getHttp("/mob/user/getArticleInfo", {
        ...this.articlePage2,
        businessType: 1,
      }).then((data) => {
        if (data.code == 200) {
          // data.list.forEach((e) => {
          // 	e.image = e.image.split('|')
          // })
          // console.log(data.list);

          // this.articleTotal = data.count
          // 如果没有数组长度，就默认头像
          if (data.list.length > 0) {
            this.imgs = data.list;
            this.addCardStyle();
          } else {
            this.$getHttp('/mob/user/getShopInfoDetail', {
              id: shopId
            }).then(res => {
              // res.shopInfo
              var imgs = []
              var id = 10086
              res.shopInfo.image.split('|').map((item, index) => {
                imgs.push({
                  id: id + index,
                  image: item,
                  index: index,
                  type: 2,
                  remarks: 1
                })
              })
              this.imgs = imgs
              console.log('this.imgs', this.imgs)
              this.addCardStyle();

            })
          }

          setTimeout(() => {
            var elevideo = document.getElementById("video1001");
            if (!elevideo) return;

            elevideo.addEventListener("play", function () {
              //播放开始执行的函数
              that.dianjiVideo();
              that.normalStatus = false;
              console.log("开始播放");
            });
            elevideo.addEventListener("pause", function () {
              //暂停开始执行的函数
              that.normalStatus = true;
              console.log("暂停播放");
            });
            elevideo.addEventListener(
              "ended",
              function () {
                //结束
                that.normalStatus = true;
                console.log("播放结束");
              },
              false
            );
          }, 1000);
        }
      });
    },
    getFriendCircle() {
      console.log(this.articlePage2);
      this.$getHttp("/api/mobile/vehicleOwner/getHelpingFriendsCircle", {
        pageSize: this.articlePage.pageSize,
        pageNo: this.articlePage.pageNo,
        storeId: this.articlePage.shopId,
        userId: localStorage.getItem("userInfo")
          ? JSON.parse(localStorage.getItem("userInfo")).id
          : "",
        businessType: 1,
      }).then((data) => {
        if (data.code == 200) {
          // data.list.forEach((e) => {
          // 	e.image = e.image.split('|')
          // })
          data.helpingFriendsCircle.pageList.forEach((item) => {
            item.chage = 0;
            item.picture = this.manageImg(item.picture);
            item.imageList = this.manageImg(item.picture);
            item.video = this.manageImg(item.video);
            console.log(
              "=====>",
              "item.imageListitem.imageList",
              item.imageList
            );
          });
          console.log(data.list);
          this.articleList = data.helpingFriendsCircle.pageList;
          this.articleTotal = data.helpingFriendsCircle.pageCount;
          // this.articleTotal = data.count
        }
      });
    },
    //获取首页广告
    getBanner() {
      this.$getHttp("/mob/home/getBanner", { type: 3 }).then((data) => {
        if (data.code == 200) {
          data.list.forEach((e) => {
            this.bannerList.push(e);
            this.imgs.push({
              index: e.sort - 1,
              cover: this.$img + e.image,
            });
          });
        }
      });
    },
    //店铺经纪人信息
    getAgentInfo() {
      this.$getHttp("/mob/user/getAgentInfoList", this.agentInfoPage).then(
        (data) => {
          if (data.code == 200) {
            console.log(data);
            data.page.list.filter((item) => {
              return item.dutyStatus == "1";
            });
            this.agentInfoList = data.page.list;
            this.agentInfoTotal = data.page.list.length;
          }
        }
      );
    },
    addIntegral(val, title) {
      this.$postHttp("/mob/iteration/addIntegral", {
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
        ruleNumber: val,
        title: title,
      }).then((res) => { });
    },
    collect(type) {
      if (this.loginstate) {
        if (type == 1) {
          this.$postHttp("/mob/user/saveUserCollection", {
            userId: JSON.parse(localStorage.getItem("userInfo")).id,
            type: 1,
            cbType: 2,
            relationId: this.$route.query.id,
          }).then((data) => {
            if (data.code == 200) {
              this.isCollection = 1;
              this.$message({
                message: "关注成功！",
                type: "success",
                offset: 120,
                duration: 2000,
              });
              this.addIntegral(5, "关注门店");
            }
          });
        } else {
          this.$postHttp("/mob/user/saveUserCollection", {
            userId: JSON.parse(localStorage.getItem("userInfo")).id,
            type: 1,
            cbType: 2,
            relationId: this.$route.query.id,
            cancel: 1,
          }).then((data) => {
            if (data.code == 200) {
              this.isCollection = 0;
              this.$message({
                message: "取消关注成功！",
                type: "success",
                offset: 120,
                duration: 2000,
              });
            }
          });
        }
      } else {
        this.$message({
          message: "请登录之后在关注店铺！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    leibieClick(num) {
      this.leibieXuan = num;

      switch (num) {
        case 1:
          return;
          break;
        case 2:
          if (this.agentInfoList.length == 0) {
            this.getAgentInfo();
          }
          break;
        case 3:
          if (this.articleList.length == 0) {
            this.getFriendCircle();
            return;
            this.getArticleInfo();
          }
        case 4:
          if (this.recruitData.length == 0) {
            this.getRecruit();
          }
          break;
      }
    },
    //开启聊天
    chat(id) {
      this.$refs.chats.chatOpne(id);
    },
    search() {
      this.housePage.keyword = this.searchtext;
      this.getHouseInfo();
      // this.openUrl({
      //   path: "/index/houseSearch",
      //   query: {
      //     search: this.searchtext,
      //   },
      // });
    },
    titClick(index) {
      this.xuanzhong = index;
      switch (index) {
        case 0:
          delete this.housePage.transactionType;
          delete this.housePage.newOld;
          this.housePage.pageNo = 1;
          this.getHouseInfo();
          break;
        case 1:
          this.housePage.transactionType = 2;
          this.housePage.newOld = 2;
          this.housePage.pageNo = 1;
          this.getHouseInfo();
          break;
        case 2:
          this.housePage.transactionType = 2;
          this.housePage.newOld = 1;
          this.housePage.pageNo = 1;
          this.getHouseInfo();
          break;
        case 3:
          delete this.housePage.newOld;
          this.housePage.transactionType = 1;
          this.housePage.pageNo = 1;
          this.getHouseInfo();
          break;
      }
    },
    currenthouse(e) {
      this.scrollToElement(document.querySelector(".bottom"));
      this.housePage.pageNo = e;
      this.getHouseInfo();
    },
    currentagentInfo(e) {
      this.scrollToElement(document.querySelector(".list2"));
      this.agentInfoPage.pageNo = e;
      this.getAgentInfo();
    },
    currentarticle(e) {
      this.scrollToElement(document.querySelector(".list3"));
      this.articlePage.pageNo = e;
      this.getFriendCircle();
      // this.getArticleInfo()
    },
    particulars(id) {
      this.openUrl({
        path: "/index/particulars",
        query: {
          type: "article",
          id: id,
        },
      });
    },
    toAgent(id) {
      this.openUrl({
        path: "/index/goldConsultant",
        query: {
          id: id,
        },
      });
    },
    details(item) {
      console.log(item);
      if (item.transactionType == 1 || item.transaction_type == 1) {
        this.openUrl({
          path: "/index/leaseDetails",
          query: {
            id: item.id,
          },
        });
      } else {
        this.openUrl({
          path: "/index/newHouseDetails",
          query: {
            id: item.id,
          },
        });
      }
    },
    async getData() {
      this.$nextTick(() => {
        // this.loading = false;
      });
    },
    // 滑动上一个
    prev(index) {
      // this.imgs.unshift(this.imgs.pop());
      if (!this.normalStatus) return;
      // var elevideo = document.getElementById("video1000");
      // elevideo.pause()
      this.config5.push(this.config5.shift());
      this.currentIndex = this.currentIndex - 1;
      if (this.currentIndex < 0) {
        this.currentIndex = this.imgs.length - 1;
      }
      this.centerCard();
      this.centerIndex("prev");
    },
    // 滑动下一个
    next() {
      // this.imgs.push(this.imgs.shift());
      if (!this.normalStatus) return;
      // var elevideo = document.getElementById("video1000");
      // elevideo.pause()
      this.config5.unshift(this.config5.pop());
      this.currentIndex = this.currentIndex + 1;
      if (this.currentIndex > this.imgs.length - 1) {
        this.currentIndex = 0;
      }
      this.centerCard();
      this.centerIndex("next");
      // console.log(this.currentIndex);
    },
    // 开始移动端滑动屏幕
    start(event) {
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    // 连续滑动
    move(event) {
      this.endY = event.changedTouches[0].clientY;
      this.endX = event.changedTouches[0].clientX;
      this.stopDefault(event);
      // 如果是滑动，注解（223行到231行）这段。如果是连续滑动，放开（223行到231行）注解
      this.interval = this.endX - this.startX;
      if (this.interval > 40) {
        this.startX = this.endX;
        this.prev();
      }
      if (this.interval < -40) {
        this.startX = this.endX;
        this.next();
      }
    },
    shopdetails(id) { },
    // 滑动
    end(event) {
      // 如果是滑动，放开（236行到238行）的注解。如果是连续滑动，注解（236行到238行）
      // this.endY = event.changedTouches[0].clientY;
      // this.endX = event.changedTouches[0].clientX;
      // this.formatSwiper();
    },
    formatSwiper() {
      if (this.startX > this.endX) {
        console.log("左边滑动");
        if (this.startX > this.endX + 40) {
          this.next();
        }
      } else {
        console.log("右边滑动");
        if (this.endX > this.startX + 40) {
          this.prev();
        }
      }
    },
    // 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
    stopDefault(event) {
      let differenceY = this.endY - this.startY;
      let differenceX = this.endX - this.startX;
      if (Math.abs(differenceX) > Math.abs(differenceY)) {
        event.preventDefault();
      }
    },
    // 当前imgs在位置上的index（并非img数组的index）
    centerIndex(val) {
      if (val == "prev") {
        for (let val of this.imgs) {
          if (val.index == this.imgs.length - 1) {
            val.index = 0;
          } else {
            val.index = val.index + 1;
          }
        }
      } else {
        for (let val of this.imgs) {
          if (val.index == 0) {
            val.index = this.imgs.length - 1;
          } else {
            val.index = val.index - 1;
          }
        }
      }
    },
    showWeigui(item) {
      this.bUserId = item.userId;
      setTimeout(() => {
        this.$refs.inform.getReportMyRecord();
      }, 100);

      // const routeLink = this.$router.resolve({
      //         path: '/index/inform?userId='+userId
      //       })
      //     window.open(routeLink.href, '_blank')
    },
    // 点击
    chooseItem(item, index) {
      this.articleList.forEach((el) => {
        if (item.image == this.$img + el.image) {
          localStorage.setItem("banner", JSON.stringify(el));
          // this.openUrl({
          //   path: "/index/particulars",
          //   query: {
          // 		type:'banner'
          //   },
          // });
          const routeLink = this.$router.resolve({
            path: "/index/particulars?type=banner",
          });
          window.open(routeLink.href, "_blank");
        }
      });
      //   let cycles = item.index;
      //   if (item.index < 3) {
      //     for (let i = 0; i < 3 - cycles; i++) {
      //       console.log(item.index);
      //       this.prev();
      //     }
      //     console.log("1");
      //   } else if (item.index > 3) {
      //     for (let i = -1; i < item.index - 3; i++) {
      //       this.next();
      //     }
      //     console.log("2");
      //   } else if (item.index == 3) {
      //     console.log("3");
      // 		this.imgs.forEach((e) =>{
      // 			if(e.index == 3){
      // 				this.bannerList.forEach((el) =>{
      // 					if(e.cover == (this.$img+el.image)){
      // 						localStorage.setItem("banner",JSON.stringify(el))
      // 						this.openUrl({
      // 						  path: "/index/particulars",
      // 						  query: {
      // 								type:'banner'
      // 						  },
      // 						});
      // 					}
      // 				})
      // 			}
      // 		})
      //   }
    },
    // 计算中间卡片信息
    centerCard() {
      this.centerInfo = this.imgs[this.currentIndex];
      this.$emit("centerInfo", this.centerInfo);
      // this.$emit('centerInfo', this.centerInfo);
      // console.log(this.imgs[2].id);
    },

    addCardStyle() {
      if (this.imgs.length > 7) {
        let addtime = this.imgs.length - 7;
        for (let i = 0; i < addtime; i++) {
          console.log("add");
          this.config5.push({
            id: "center",
            position: "absolute",
            width: "45%",
            height: "100%",
            top: "0px",
            left: "50%",
            marginLeft: "-22.5%",
            opacity: 0,
            transition: ".1s",
          });
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.tit_name {
  overflow: hidden;
  width: 1200px;
  // margin-left: 50%;
  // transform: translateX(-50%);
  margin: 0 auto;
  margin-top: 30px;

  div {
    display: inline-block;
    vertical-align: middle;
  }

  .p1 {
    font-size: 26px;
    color: #333333;
    font-weight: 600;
    margin-right: 48px;
    width: auto;
    max-width: 600px;
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .p3 {
    font-size: 18px;
    color: #999999;
    width: 320px;
  }

  .p2 {
    font-size: 18px;
    color: #999999;
    width: 82px;
    border-right: 1px solid #999999;
    margin-right: 10px;
  }
}

.leibie {
  margin-top: 40px;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  padding-bottom: 30px;

  div {
    display: inline-block;
    width: 108px;
    height: 50px;
    line-height: 50px;
    background: #f2f2f2;
    border-radius: 4px;
    font-size: 20px;
    text-align: center;
    margin-right: 16px;
    color: #333333;
    cursor: pointer;
  }

  .xuan {
    color: #fff;
    background: #64b6a8;
  }
}

.bottom {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  margin-top: 0px;

  .titLiat {
    width: 1200px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 40px;
    margin-bottom: 15px;

    .li {
      display: inline-block;
      vertical-align: top;
      margin-right: 40px;
      color: #333;
      cursor: pointer;

      p {
        font-size: 26px;
      }

      img {
        width: 32px;
        height: 16px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: -8px;
      }
    }

    .cur {
      color: #64b6a8;
      border: 0;
      transform: scale(1.1);
    }
  }

  .tit {
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 24px;
  }

  .list {
    width: 100%;

    .li {
      position: relative;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid #e0e0e0;

      .biao {
        width: 300px;
        height: 200px;
      }

      .name {
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        height: 200px;
        width: 700px;

        .t_1 {
          font-size: 26px;
          cursor: pointer;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_3 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_4 {
          position: absolute;
          font-size: 18px;
          color: #666666;
          bottom: 0;
          left: 0;
          white-space: nowrap;

          img {
            width: 31px;
            height: 31px;
          }

          div {
            display: inline-block;
            /* width: 90px; */
            height: 30px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-left: 24px;
            color: #64b6a8;
          }
        }
      }

      .qian {
        position: absolute;
        top: 62px;
        right: 0;

        .p1 {
          //width: 120px;
          font-size: 32px;
          color: #e00000;
          text-align: center;
        }

        .p2 {
          //width: 120px;
          font-size: 18px;
          color: #333333;
          text-align: center;
        }
      }
    }
  }
}

.list2 {
  margin-top: 30px;
  color: #333;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);

  .li {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin-right: 13px;
    text-align: center;
    width: 290px;
    height: 384px;
    border: 1px solid #d0d0d0;
    margin-bottom: 15px;

    // padding-left: 15px;
    .touxiang {
      width: 180px;
      height: 180px;
      margin-top: 14px;
      //   margin-left: 58px;
    }

    .name {
      width: 100%;
      text-align: center;
      font-size: 17px;
      color: #333333;
      margin-top: 11px;
      font-weight: 400;
    }

    .pingfen {
      margin-top: 15px;

      div {
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
        // margin-left: 33px;
        margin-right: 15px;
      }

      img {
        vertical-align: middle;
        width: 26px;
        height: 26px;
        margin-right: 3px;
      }
    }

    .weigui {
      margin-top: 19px;

      .wei {
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
        // margin-left: 33px;
        cursor: pointer;

        span {
          vertical-align: middle;
          margin-right: 10px;
        }
      }

      img {
        vertical-align: middle;
        width: 25px;
        height: 25px;
        margin-right: 6px;
        cursor: pointer;
      }
    }

    .xian {
      position: absolute;
      left: -1px;
      bottom: -1px;
      width: 290px;
      height: 9px;
      background-color: #64b6a8;
    }
  }

  .li:nth-child(4n) {
    margin-right: 0px;
  }

  .lixuan {
    opacity: 0.4;
    cursor: pointer;
  }
}

.list3 {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 33px;

  .li {
    position: relative;
    margin-bottom: 32px;

    .img {
      width: 300px;
      height: 200px;
    }

    .wenzi {
      display: inline-block;
      vertical-align: top;
      width: 876px;
      height: 154px;
      margin-left: 14px;

      .p1 {
        font-size: 20px;
        color: #333333;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .p6 {
        position: absolute;
        bottom: 0;
        color: #333333;

        span {
          font-size: 20px;
          display: block;
          margin-top: 10px;
        }
      }
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.swiper {
  position: relative;
  width: 1200px;
  height: 240px;
  overflow: hidden;
  margin-left: 50%;
  transform: translateX(-50%);
}

.shopIntroduc {
  display: flex;
  // align-items: center;
  justify-content: space-between;
  width: 1200px;
  margin: 0 auto;
  margin-top: 15px;

  .shopIntroduc_left {
    display: flex;
    align-items: center;

    .p3 {
      font-size: 18px;
      color: #999999;
      width: 640px;
    }

    .p2 {
      font-size: 18px;
      color: #999999;
      width: 82px;
      border-right: 1px solid #999999;
      margin-right: 10px;
    }
  }

  .shopIntroduc_right {
    img {
      width: 33px;
      height: 33px;
    }
  }
}

/deep/.swiper-button-prev,
.swiper-button-next {
  color: #64b6a8;
}
</style>
